<template>
  <div class="plan-calendar-comp">
    <h3 class="view-page-title">计划日历</h3>
    <px-calendar ref="calendar" v-model="currentDate" class="plan-calendar-comp-body">
      <template #header>
        <div class="flex-row">
          <px-form ref="formRef" style="width: 48%" class="custom-form-ui inspect-form" label-position="right" label-width="120px">
            <px-row :gutter="16">
              <px-col :span="12">
                <px-form-item label="日期">
                  <px-date-picker v-model="currentDate" type="month" placeholder="请选择日期" />
                </px-form-item>
              </px-col>
              <px-col :span="12">
                <FactoryArea :factoryArea="factoryAreaCode" @changeFactoryArea="changeFactoryArea" />
              </px-col>
            </px-row>
          </px-form>
          <px-button-group>
            <px-button size="small" @click="selectDate('prev-month')">上个月</px-button>
            <px-button size="small" @click="selectDate('today')">今天</px-button>
            <px-button size="small" @click="selectDate('next-month')">下个月</px-button>
          </px-button-group>
        </div>
      </template>
      <template #date-cell="{ data }">
        <div :class="`date-body ${isActive(data)}`" @click="showSlider = true">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(2)[0] }}
          </p>
          <px-scrollbar class="date-body-list">
            <DayTaskList :config="TAG_CONFIG" :taskData="taskData[data.day]" />
          </px-scrollbar>
        </div>
      </template>
    </px-calendar>
    <ul class="legend-list">
      <li v-for="statusItem in planStatusList" :key="statusItem.id" class="legend-list-item">
        <div class="circle" :style="{ backgroundColor: `${TAG_CONFIG[statusItem.value]?.color}` }" />
        <p>{{ statusItem.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import type { CalendarDateType, CalendarInstance } from "px-ui";
import { ref } from "vue";
import { FactoryArea } from "../../components/index";
import DayTaskList from "./DayTaskList.vue";
// 根据后端巡检任务字典接口返回内容配置
const TAG_CONFIG = {
  0: {
    color: "#909399"
  }, // 已取消
  1: {
    color: "#F59E0B"
  }, // 未开始
  2: {
    color: "#3B82F6"
  }, // 执行中
  3: {
    color: "#10B981"
  }, // 已完成
  6: {
    color: "#F5620B"
  }, // 待审核
  9: {
    color: "#EF4444"
  } // 撤回审核
};
const props = defineProps(["taskData", "planStatusList", "currentTask"]);
const currentDate = defineModel("currentDate");
const factoryAreaCode = defineModel("factoryAreaCode");
const showSlider = defineModel("showSlider");
const calendar = ref<InstanceType<typeof CalendarInstance>>();
const selectDate = (val: InstanceType<typeof CalendarDateType>) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
// 地块改变
const changeFactoryArea = (value: any) => {
  console.log(value, "value");

  factoryAreaCode.value = value;
};
const isActive = (data: any) => {
  if (props.currentTask) {
    if (!props.currentTask.startTime || !props.currentTask.endTime) {
      return false;
    }
    // -替换为/，解决浏览器兼容问题
    const itemStartTime = props.currentTask.startTime.replace(/-/g, "/").split(" ")[0] + " 00:00:00";
    const newDateItem = data.day.replace(/-/g, "/");
    const itemEndTime = props.currentTask.endTime.replace(/-/g, "/").split(" ")[0] + " 24:00:00";
    const startTime = new Date(itemStartTime).getTime();
    const currentTime = new Date(newDateItem).getTime();
    const endTime = new Date(itemEndTime).getTime();
    const flag = currentTime >= startTime && currentTime < endTime;
    if (flag) {
      return "date-body-active";
    }
  }
  return "";
};
</script>
<style lang="scss" scoped>
.inspect-form {
  padding-top: 24px;
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}
.plan-calendar-comp {
  position: relative;
  flex-grow: 1;
  padding: 0 24px;
  background: #fff;
  border-radius: 4px;
  transition: all 1s linear;

  .flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  :deep(.px-form-item) {
    width: 100%;
    margin: 0;
  }

  .view-page-title {
    padding-top: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: rgb(0 0 0 / 90%);
  }

  .legend-list {
    position: absolute;
    right: 40px;
    bottom: 40px;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 8px 16px;
    background: #fff;
    border-radius: 5px;
    box-shadow:
      0 5px 5px -3px rgb(0 0 0 / 10%),
      0 8px 10px 1px rgb(0 0 0 / 6%),
      0 3px 14px 2px rgb(0 0 0 / 5%);
  }

  .legend-list-item {
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(0 0 0 / 80%);

    &:not(:first-child) {
      margin-left: 16px;
    }
  }

  .task-list-item {
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(0 0 0 / 80%);
  }

  .circle {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
  }

  :deep(.plan-calendar-comp-body) {
    .px-calendar__header,
    .px-calendar__body {
      padding: 16px 0;
    }

    .px-calendar__body {
      flex-grow: 1;
    }

    .px-calendar-table {
      height: calc(100vh - 350px);
    }

    .px-calendar-table .px-calendar-day {
      padding: 0;
    }
    td:not(.is-selected) {
      &:hover {
        background-color: #f5f5f5;
      }
      .px-calendar-day:hover {
        background-color: transparent;
      }
    }
    .date-body {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 8px;

      &.date-body-active {
        background: #ecf5ff;
        box-shadow: inset 0 2px 0 0 rgb(59 130 246 / 80%);
      }
    }

    .date-body-list {
      flex-grow: 1;
      overflow-y: auto;
    }
  }
}
</style>
